import React from 'react';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Eye, Edit, Trash2 } from 'lucide-react';

const ProductCard = ({ product, onView, onEdit, onDelete }) => {
  return (
    <Card className="hover:shadow-md transition-shadow">
      <CardHeader className="p-0">
        <div className="relative">
          <img
            src={product.image || 'https://dummyimage.com/300x200/eee/333&text=商品图片'}
            alt={product.name}
            className="w-full h-48 object-cover rounded-t-lg"
          />
          <Badge 
            variant={product.status === 'active' ? 'success' : 'destructive'}
            className="absolute top-2 right-2"
          >
            {product.status === 'active' ? '上架' : '下架'}
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="p-4">
        <div className="space-y-3">
          {/* 商品名称 */}
          <h3 className="font-semibold text-lg line-clamp-2" title={product.name}>
            {product.name}
          </h3>
          
          {/* 商品分类 */}
          <div className="text-sm text-muted-foreground">
            分类: {product.category}
          </div>
          
          {/* 价格信息 */}
          <div className="flex items-center gap-2">
            <span className="text-xl font-bold text-primary">
              ¥{product.price}
            </span>
            {product.originalPrice && product.originalPrice > product.price && (
              <span className="text-sm text-muted-foreground line-through">
                ¥{product.originalPrice}
              </span>
            )}
          </div>
          
          {/* 库存和销量 */}
          <div className="flex justify-between text-sm text-muted-foreground">
            <span>库存: {product.stock}</span>
            <span>销量: {product.sales || 0}</span>
          </div>
          
          {/* 商品标签 */}
          {product.tags && product.tags.length > 0 && (
            <div className="flex flex-wrap gap-1">
              {product.tags.slice(0, 3).map((tag, index) => (
                <Badge key={index} variant="secondary" className="text-xs">
                  {tag}
                </Badge>
              ))}
              {product.tags.length > 3 && (
                <Badge variant="secondary" className="text-xs">
                  +{product.tags.length - 3}
                </Badge>
              )}
            </div>
          )}
          
          {/* 操作按钮 */}
          <div className="flex items-center gap-2 pt-2">
            <Button 
              variant="ghost" 
              size="sm" 
              onClick={() => onView && onView(product)}
              className="flex-1"
            >
              <Eye className="size-4 me-1" />
              查看
            </Button>
            <Button 
              variant="ghost" 
              size="sm" 
              onClick={() => onEdit && onEdit(product)}
              className="flex-1"
            >
              <Edit className="size-4 me-1" />
              编辑
            </Button>
            <Button 
              variant="ghost" 
              size="sm" 
              onClick={() => onDelete && onDelete(product)}
              className="text-destructive hover:text-destructive"
            >
              <Trash2 className="size-4" />
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default ProductCard; 